<template>
    <div class="lqyMap" style="width:100%;height:90%;" ref="lqyMap"></div>
</template>

<script>
import Lqy from '../../assets/mapData/CDLongQuanYiDistrict.geojson'
import * as echarts from 'echarts';
import {getStreetsPopulationRankApi } from '../../http/Api.js'
export default {

    mounted() {
        this.getStreetsPopulationRank()

    },
    data() {
        return {
            jiaoDaoODData:[]

        };
    },
    methods: {
        getStreetsPopulationRank(){
            getStreetsPopulationRankApi().then(res=>{

                res.data.forEach(item=>{
                    
                    this.jiaoDaoODData.push({
                        name:item.name,
                        value:item.sum
                    })
                })

                
                // 初始化 图表
                this.initChart()



            }).catch(err => console.log(err))
        },
        initChart() {
            let _data = this.jiaoDaoODData
            // 初始化echart
            let lqyMapChart = echarts.init(this.$refs.lqyMap)
            // 注册 地图
            echarts.registerMap('LqyMap',Lqy)
            lqyMapChart.setOption({
                geo:{
                    name: '龙泉驿区',
                    type: 'map',
                    map: 'LqyMap',
                    roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                    scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
                      min: 0.8,
                      max: 1.4
                    },
                    aspectScale:1,//长宽比

                    // 初始中心
                    layoutCenter: ['50%', '50%'],
                    // 初始大小
                    layoutSize: 800,
                    "itemStyle": {
                        "normal": {
                            "borderWidth": 1,  //设置边线粗细度
                            "opacity": 0.5,        //设置透明度，范围0~1，越小越透明
                            "areaColor": "#63B8FF"    //地图区域颜色
                        },
                        "emphasis": {
                            "areaColor": "#FF9500"    //高亮时地图区域颜色
                        }
                    },
                    label: {
                        show: true,
                        color:"#fff",
                        fontWeight:"bolder",
                        
                    },

                },
                visualMap: {
                    type: 'piecewise',
                    right:"5%",
                    align:"left",
                    textStyle:{
                        color:"#fff",
                    },
                    // text:['图例','(千人)'],
                    pieces: [
                        {min: 200000, max: 99999999, label: '> =200', color: "#B80E0E"},
                        {min: 100000, max: 199999, label: '> =100', color: "#FA3131"},
                        {min: 50000, max: 99999, label: '> =50', color: "#FF712F"},
                        {min: 20000, max: 49999, label: '> =20', color: "#FAAA42"},
                        {min: 10000, max: 19999, label: '> =10', color: "#FCE148"},
                        {min: 5000, max: 9999, label: '> =5', color: "#ADFD52"},
                        {min: 0, max: 4999, label: '> =0', color: "#78FA8A"},
                    ]
                    
                  },
                series:[
                    {
                        name: '龙泉驿区',
                        type: 'map',
                        map: 'LqyMap',
                        geoIndex: 0, // (bug fixed:解决在地图上缩放重影问题：https://www.dazhuanlan.com/2019/11/30/5de14b1b3aa97/)
                        // roam: true, // 是否开启鼠标缩放和平移漫游
                        roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                        scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
                          min: 0.8,
                          max: 1.4
                        },
                        aspectScale:1,//长宽比
                        // 初始中心
                        layoutCenter: ['50%', '50%'],
                        // 初始大小
                        layoutSize: 800,
                        label: {
                            show: true,
                            color:"#fff",
                            fontWeight:"bolder",
                            
                        },
                        data: _data
                    }
                ]

            }, true)

            window.addEventListener("resize", () => {  //根据屏幕进行实时绘制
                lqyMapChart.resize();
            });
        },



    }
}
</script>

<style lang="scss" scoped>
.lqyMap {
    
}
</style>